<template>
	<view>
		<header-bar :title=titleName>
			<uni-icons type="undo" size="23" slot="back"></uni-icons>
		</header-bar>
		<view class="order-item">
			<view class="order-top">
				<view class="order-no">订单编号：452698415231</view>
				<view class="order-status-1">正在进行中</view>
			</view>
			<view class="good-box">
				<image
					src="https://img.alicdn.com/imgextra/i3/1329830146/O1CN016PwUIg1CwuYFbldvL_!!0-saturn_solar.jpg_468x468q75.jpg_.webp"
					class="good-img">
				</image>
				<view class="good-info">
					<view class="good-title">
						新式四驱微耕机链轨直连式柴油小型农业多功能犁地耕地开沟旋耕机
					</view>
					<view class="good-bottom">
						当前拍卖价格：4940元
					</view>
					<view class="good-time">
						截止剩余时间：
						<uni-countdown :font-size="14" :show-day="false" :hour="9" :minute="24" :second="7"
							color="#FFFFFF" background-color="#00D0D0" />
					</view>
				</view>
			</view>
		</view>
		<view class="order-item">
			<view class="order-top">
				<view class="order-no">订单编号：845695231245</view>
				<view class="order-status-1">正在进行中</view>
			</view>
			<view class="good-box">
				<image
					src="https://img11.360buyimg.com/n1/jfs/t1/135257/32/22355/280244/61e90204E52ca6244/a5bc31c99ad3401e.jpg.avif"
					class="good-img">
				</image>
				<view class="good-info">
					<view class="good-title">
						尊福林 园艺工具套装家用种植工具箱种菜种花多肉松土铲子喷壶修枝剪刀组合园艺用品 园艺工具-10件套
					</view>
					<view class="good-bottom">
						当前拍卖价格：100.0元
					</view>
					<view class="good-time">
						截止剩余时间：
						<uni-countdown :font-size="14" :show-day="false" :hour="12" :minute="24" :second="7"
							color="#FFFFFF" background-color="#00D0D0" />
					</view>
				</view>
			</view>
		</view>
		<view class="order-item">
			<view class="order-top">
				<view class="order-no">订单编号：956412385643</view>
				<view class="order-status-2">已结束</view>
			</view>
			<view class="good-box">
				<image
					src="https://img14.360buyimg.com/n7/jfs/t1/124867/15/22230/364939/627e19baEfa101c51/63857b9347aa5e71.jpg"
					class="good-img">
				</image>
				<view class="good-info">
					<view class="good-title">
						四冲程汽油微耕机松土机旋耕机耕地机小型农用翻地机开沟机除草机 宗申配松土刀行走轮除草轮开沟器
					</view>
					<view class="good-bottom">
						拍卖价格：2000.0元
					</view>
					<view class="good-time">
						截止剩余时间：
						<uni-countdown :font-size="14" :show-day="false" :hour="0" :minute="0" :second="0"
							color="#FFFFFF" background-color="#00D0D0" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleName: "我的公益拍卖",
			}
		},
	}
</script>

<style lang="scss">
	.order-item {
		width: 740rpx;
		height: 340rpx;
		margin-top: 30rpx;
		margin-left: 3rpx;
		background: #d2fdff;
		border: 1px solid lightgrey;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.order-item .order-top {
		width: 670rpx;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.order-top .order-no {
		height: 44rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 44rpx;
		color: #686661;
		opacity: 1;
	}

	.order-top .order-status-0 {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #F86341;
		opacity: 1;
	}

	.order-top .order-status-10,
	.order-top .order-status-1,
	.order-top .order-status-2 {
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgb(61, 182, 10);
		opacity: 1;
	}
	.order-top .order-status-2{
		color: red;
	}

	.order-top .order-status-3 {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 44rpx;
		color: #B2B1AE;
		opacity: 1;
	}

	.order-item .good-box {
		width: 670rpx;
		height: 230rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.order-item .good-box .good-img {
		width: 230rpx;
		height: 230rpx;
		margin-top: -60rpx;
		border-radius: 16rpx;
	}

	.good-box .good-info {
		width: 420rpx;
		height: 220rpx;
		margin-top: -60rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.good-bottom {
		color: coral;
		font-size: 30rpx;
	}

	.good-info .good-title {
		width: 420rpx;
		height: 88rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 45rpx;
		color: #000000;
		opacity: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.good-info .good-time {
		color: black;
		font-size: 29rpx;
		display: flex;
		margin-top: -15rpx;
		justify-content: space-between;
		align-items: center;
	}
</style>
